<template>
  <div>
    <NavigationBar :userLoggedIn="userLoggedIn" :username="username" @logout="handleLogout" />

    <div v-if="userLoggedIn">
      <!-- 用户已登录的内容 -->
      <p class="welcome-message">欢迎，{{ username }}！</p>
    </div>
    <div v-else>
      <!-- 用户未登录的内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import NavigationBar from '../components/NavigationBar.vue'

export default {
  components: {
    NavigationBar
  },
  data () {
    return {
      userLoggedIn: false,
      username: ''
    }
  },
  created () {
    this.checkUserLoginStatus()
  },
  methods: {
    checkUserLoginStatus () {
      // 在实际应用中，您可以在此处检查用户登录状态并设置userLoggedIn和username
      // 这里使用示例数据
      if (localStorage.getItem('userLoggedIn')) {
        this.userLoggedIn = true
        this.username = localStorage.getItem('username')
      }
    },
    handleLogout () {
      // 用户退出登录时的处理逻辑
      // 清除前端状态中的用户名
      this.username = ''
      // 清除 localStorage 中的登录信息
      localStorage.removeItem('userLoggedIn')
      localStorage.removeItem('username')
      localStorage.removeItem('token')
      // 导航到首页
      this.$router.push('/')
      // 更新用户登录状态
      this.userLoggedIn = false
    }
  }
}
</script>

<style>
/* 样式 */
</style>
